<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
  <title>带图片的内容 - JRoll</title>
  <link rel="stylesheet" href="../css/demo.css">
  <script src="../download/jroll.min.js"></script>
</head>
<body>
  <div id="withpic">
    <header id="header">带图片的内容</header>
    <div id="wrapper">
      <div id="scroller">
        <img src="../images/1.jpg" width="100%" height="auto" />
        <p>纳米核心 图1</p>
        <img src="../images/2.jpg" width="100%" height="auto" />
        <p>纳米核心 图2</p>
        <img src="../images/3.jpg" width="100%" height="auto" />
        <p>纳米核心 图3</p>
        <img src="../images/4.jpg" width="100%" height="auto" />
        <p>纳米核心 图4</p>
        <img src="../images/5.jpg" width="100%" height="auto" />
        <p>纳米核心 图5</p>
        <img src="../images/6.jpg" width="100%" height="auto" />
        <p>纳米核心 图6</p>
      </div>
    </div>
    <footer id="footer">图片加载完成后需要执行refresh</footer>
  </div>
  <script>
    var jroll = new JRoll("#wrapper", {bounce:true});

    var imgs = document.querySelectorAll("#scroller img");

    if (imgs) {
      //图片加载完成后会改变scroller的高度，因此要refresh一下
      Array.prototype.forEach.call(imgs, function(i){
        i.onload = function() {
          jroll.refresh();
        };
      });
    }
  </script>
</body>
</html>